<template>
    <div class="box">
        <el-form class="msg-info inline-form"
                 :model="msgInfo"
                 :rules="msgInfoRules"
                 :label-width="labelWidth"
                 ref="msgInfo">
            <el-form-item label="标题222"
                          prop="title">
                <el-input v-model="msgInfo.title"></el-input>
            </el-form-item>
            <el-form-item label="封面图片"
                          prop="img">
                <el-upload class="avatar-uploader"
                           :action="uploadImg.action"
                           :on-remove="handleRemove"
                           :on-preview="handlePreview"
                           :on-success="handleSuccess"
                           multiple
                           :limit="1"
                           :before-upload="qwe"
                           :file-list="fileList"
                           :data="resData"
                           list-type="picture">
                    <el-button size="small"
                               type="primary">点击上传
                    </el-button>
                    <div slot="tip"
                         class="el-upload__tip">只能上传jpg/png文件
                    </div>
                </el-upload>
            </el-form-item>
            <el-form-item label="摘要"
                          prop="abstractText">
                <el-input v-model="msgInfo.abstractText"
                          type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <quill-editor style="width: 600px;"
                              ref="myTextEditor"
                              @change="showChange($event)"
                              v-model="msgInfo.content"
                              :options="editorOption"></quill-editor>
                <el-input type="hidden"
                          v-model="msgInfo.content"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="pan-btn green-btn sm-btn"
                           size="small"
                           @click="saveMsgHandle">保存123
                </el-button>
            </el-form-item>
        </el-form>
        <div class="phone">
            <img src="../../assets/images/journal.png"
                 class="jouImg"/>
            <div>
                <span>&lt;</span>
                <span class="art">文章</span>
            </div>
            <div>{{msgInfo.title}}</div>
            <div>{{msgInfo.abstractText}}</div>
            <div v-html="msgInfo.content"></div>
        </div>
    </div>
</template>
<script>
    import {parseTime} from '@/utils/index'
    import request from '@/utils/request'
    import {quillEditor} from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'

    export default {
        name: 'PeriodicalEdit',
        props: ['n', 'json'],
        data() {
            return {
                uploadImg: {
                    action: '/activityConsole/periodicalMessage/uploadImage/'
                },
                resData: {
                    id: this.$route.query.activityId
                },
                backgroundImage: '',
                msgInfoStatus: null,
                msgInfoDate: '',
                fullUrl: '',
                fileList: [],
                list: [],
                questionnaireContentFlag: false,
                guessContentFlag: false,
                showWordLimit: true,
                // /////x信息编辑
                msgInfo: {
                    title: '',
                    abstractText: '',
                    content: '',
                    backgroundImage: ''
                },
                msgInfoRules: {
                    title: [
                        {required: true, trigger: 'blur', message: '请输入活动标题'},
                        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                    ],
                    abstractText: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                    ]
                },
                labelWidth: '150px',
                editorOption: {
                    placeholder: 'Hello World'
                },
                id: '',
                guessInfo: {
                    content: '',
                    baseIntegral: '',
                    platformPercent: ''
                }
            }
        },
        created() {
            this.getMsgInfo()
        },
        mounted() {

        },
        components: {
            quillEditor
        },
        methods: {
            showChange(event) {

            },
            getMsgInfo() {
                // ////获取编辑信息
                const _this = this
                request({
                    url: '/activityConsole/periodicalMessage/getMessageById/' + this.$route.query.activityId,
                    method: 'get'
                }).then(res => {
                    console.log(res)
                    const dataObj = res
                    _this.msgInfo = dataObj.data
                    console.log(_this.msgInfo)
                }).catch(err => {
                    console.log(err)
                })
            },
            // 保存事件
            saveMsgHandle() {
                console.log(3423423423423424)
                const _this = this
                if (_this.$route.query.templateId) {
                    _this.msgInfo.backgroundImage = _this.fullUrl
                    _this.msgInfo.templateId = _this.$route.query.templateId
                    var params = _this.msgInfo

                    console.log(params)
                    request({
                        url: '/activityConsole/periodicalMessage/addPeriodicalMessage',
                        method: 'post',
                        dataType: 'json',
                        headers: {
                            'Content-Type': 'application/json;charset=utf-8'
                        },
                        data: params
                    }).then(res => {
                        console.log(res)
                    }).catch(err => {
                        console.log(err)
                    })
                } else {
                    console.log(333)
                    const params1 = _this.msgInfo
                    request({
                        url: '/activityConsole/periodicalMessage/updatePeriodicalMessage',
                        method: 'post',
                        dataType: 'json',
                        headers: {
                            'Content-Type': 'application/json;charset=utf-8'
                        },
                        params: params1
                    }).then(res => {
                        console.log(res)
                    }).catch(err => {
                        console.log(err)
                    })
                }
            },
            qwe(file) {
                const _this = this
                const b = file.type.indexOf('image') !== -1
                if (!b) {
                    _this.$message({
                        type: 'error',
                        message: '文件类型不支持'
                    })
                    return false
                }
                return true
            },
            handleRemove(file, fileList) {
                const _this = this
                console.log('handleRemove:===============================================')
                _this.fileList = fileList
            },
            handlePreview(file) {
                const _this = this
                console.log('handlePreview:===============================================')
                console.log(file)
                console.log(_this.fileList)
            },
            handleSuccess(response, file, fileList) {
                const _this = this
                console.log('handlePreviewSuccess:===============================================')
                _this.fileList = fileList
                console.log(response.data)
                _this.fullUrl = response.data
            }
        }
    }
</script>
<style>
    .box {
        display: flex;
        justify-content: space-around;
    }

    .msg-info {
        padding-top: 50px;
    }

    .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 600px;
    }

    .el-textarea {
        width: 600px;
    }

    /* .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9 !important;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    } */

    .phone {
        margin-top: 100px;
        width: 250px;
        position: relative;
    }

    .jouImg {
        width: 315px;
        position: absolute;
        top: -50px;
        left: -30px;
        z-index: -1000;
    }

    .art {
        margin-left: 100px;
    }

    .ql-align-right {
        text-align: right !important;
    }

    .ql-align-center {
        text-align: center !important;
    }
</style>
